<template>
	<Layout class="layout-container">
		<Content>
			<Spin fix v-if="loading"></Spin>
			<Form ref="form" :model="value" :rules="rules" label-position="left" :label-width="120">
				<Layout class="layout-container">
					<Content class="padding-all">
						<FormItem :label="label.id" prop="id">
			                <Input type="text" v-model="value.id" readonly="readonly" />
			            </FormItem>
			            <FormItem :label="label.name" prop="name">
			                <Input type="text" v-model="value.name" :placeholder="placeholder.name" />
			            </FormItem>
			            <FormItem :label="label.sort" prop="sort">
			                <InputNumber
			                	v-model="value.sort" 
			                	:min="1"
				        		:placeholder="placeholder.sort"
				        		style="width:100%;" />
			            </FormItem>
			            <FormItem :label="label.memo" prop="memo">
			                <Input 
		                    	v-model="value.memo"
		                    	type="textarea"
		                    	:rows="3"
		                    	:placeholder="placeholder.memo" />
			            </FormItem>
					</Content>
					<div class="padding-all">
		    			<span class="pull-right">
						<Button @click="reset">{{$t('info.reset')}}</Button>
						<Button 
							type="primary" 
							html-type="submit" 
							@click.prevent="submit">{{$t('info.submit')}}</Button>
						</span>
					</div>
				</Layout>
			</Form>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Spin, Form, FormItem, Button, Input, InputNumber } from 'view-design';
import { extendHtml, deleteNullValue } from 'config/utils';

//提交
const URI_SUBMIT = "/security/api/permission/edit";

export default {
	name: "SysPermEdit",
	props: {
		params: Object
	},
	data() {
		const label = {
			id: this.$t("sys.perm.id"),
			name: this.$t("sys.perm.name"),
			sort: this.$t("sys.sort"),
			memo: this.$t("sys.memo")
		};
		return {
			loading: false,
			label,
			placeholder: {
				name: this.$t('info.placeholder', [label.name]),
				sort: this.$t('info.placeholder', [label.sort]),
				memo: this.$t('info.placeholder', [label.memo])
			},
			value: {
				id: '',
				name: '',
				sort: 1,
				memo: ''
			},
			rules: {
				id: {
					label: label.id,
					required: true,
					max: 64
				},
				name: {
					label: label.name,
					required: true,
					max: 64,
					trigger: "blur"
				},
				sort: {
					label: label.sort,
					type: "number",
					min: 1,
					trigger: "blur"
				},
				memo: {
					label: label.memo,
					max: 100,
					trigger: "blur"
				}
			}
		};
	},
	methods: {
		submit() {
			this.$refs.form.validate((valid) => {
				if(valid) {
					this.loading = true;
					this.$http.post(URI_SUBMIT, this.value).then((response) => {
						var res = response.data;
						if(res.success) {
							deleteNullValue(res.data);
							//回调
							this.$emit('callback', res.data);
							//关闭窗口
							this.$emit('close');
						}
						this.loading = false;
					});
				}
			});
			return false;
		},
        reset() {
        	this.$refs.form.resetFields();
        	extendHtml(this.value, this.params.perm);
        	this.value.children = null;
        }
	},
	mounted() {
		this.$nextTick(() => {
			this.reset();
		});
	},
	components: {
		Layout,
		Content,
		Spin,
		Form,
		FormItem,
		Button,
		Input,
		InputNumber
	}
}
</script>